<template>
	<div class="print-main">
		<h3>{{orderInfoData.HotelName}}入住登记表</h3>
    <div>
    	<span class="span-title bl6">宾客姓名<br>
				Guest Name</span>
			<span class="span-text">{{orderInfoData.ContactName}}</span>
			<span class="span-title">电话<br>
				Phone Number</span>
			<span class="span-text">{{orderInfoData.ContactPhone}}</span>
    </div>
		<template v-for="m in orderInfoData.HotelOrders">
    <div>
    	<span class="span-title bl6">房间<br>
				Room</span>
			<span class="span-text">{{m.Rooms.length>1?m.Rooms.join(','):m.Rooms[0]}}（{{m.RoomCategoryName}}）</span>
			<span class="span-title">晚数<br>
				Nights</span>
			<span class="span-text">{{m.Days}}</span>
    </div>
    <div>
    	<span class="span-title">入住日期<br>
				Arriveal</span>
			<span class="span-text">{{m.CheckInDate.split('T')[0]}}</span>
			<span class="span-title">离店日期<br>
				Departure</span>
			<span class="span-text">{{m.CheckOutDate.split('T')[0]}}</span>
    </div>
		</template>
    <div>
    	<span class="span-title bl6">房费<br>
				Room Charge</span>
			<span class="span-text">￥{{orderInfoData.PaidAmount}}</span>
    </div>
		<template v-for="m in orderInfoData.RoomPayList">
		<div>
    	<span class="span-title">金额<br>
				Charge</span>
			<span class="span-text">￥{{m.PayAmount}}</span>
			<span class="span-title">支付方式<br>
				Payment Mode</span>
			<span class="span-text">{{m.PayChannelName}}</span>
    </div>
		</template>
    <div>
    	<span class="span-title bl6">押金<br>
				Deposit</span>
			<span class="span-text">￥{{orderInfoData.DepositPayAmount}}</span>
    </div>
		<template v-for="m in orderInfoData.DepositPayList">
    <div>
    	<span class="span-title">金额<br>
				Charge</span>
			<span class="span-text">￥{{m.PayAmount}}</span>
			<span class="span-title">支付方式<br>
				Payment Mode</span>
			<span class="span-text">{{m.PayChannelName}}</span>
    </div>
		</template>
		<pre>
温馨提醒：
1、您的退房时间为次日中午12:00前，如需延时退房，请提前与前台联系，延时退房收取房费50元/小时，超过3小时按一天房费收取；
2、贵重物品请妥善保管，随身携带，如有遗失，概不负责；
3、退房请关好房门，并将房卡交回前台，如有丢失按照30元/张赔偿；
4、请爱护酒店所有设施、设备，如有物品损坏照价赔偿；
5、信用卡预授权客户可享受退房免查房，需确保客房物品完好、齐全，如有损坏、丢失按照原价在预授权中扣除；
6，如您有其他方面的需要请直拨总机，或直接拨打0752—8263678。
		</pre>
		<p>请您仔细核对金额，确认无误后签名确认，谢谢！欢迎您再次光临！<br>Please carefully check the amount,after confirmation unmistakable sign,thank youo!Welcome again!</p>
		<p class="last">
			<span>宾客签名 <br>
				Signature：</span>
			<span class="border"></span>
		</p>
		<p class="footer">
			<span style="margin-right:20px">酒店地址：{{orderInfoData.Address}}</span>
			<span>联系电话：{{orderInfoData.Phone}}</span>
		</p>
	</div>
</template>
<style media="print" lang="scss">
    @page {
      size: auto;  /* auto is the initial value */
      margin: 0mm; /* this affects the margin in the printer settings */
    }
		.print-main{
			width: 885px;
    	margin: 0px auto;
			padding-left: 40px;
			font-family: "微软雅黑";
			h3{
				padding:30px 0 30px 280px;
			}
			&>div,&>p{
				margin-bottom: 15px;
				span{
					display: inline-block;
					width: 280px;
					font-size: 15px;
				}
				.span-title{
					width: 130px;
				}
				.span-title:first-child{
					border-left: 6px solid #fff;
					padding-left: 5px;
				}
				.span-title.bl6{
					border-left: 6px solid #0077d0ad;
					padding-left: 5px;
				}
				.span-text{
					position: relative;
					top:-5px;
					text-decoration: underline;
				}
			}
			pre{
				padding: 30px 0;
				font-size: 14px;
				line-height: 20px;
			}
			.last{
				text-align: right;
				margin-top: 60px;
				.border{
					border-bottom: 1px solid #000;
					width: 200px;
					height: 30px;
				}
			}
			.footer{
				position: absolute;
				bottom:0px;
			}
		}
</style>
<script>
	  export default {
        data () {
            return {
							orderInfoData:{}
            }
        },
        mounted(){
					let id=this.$route.query.id
					if(id){
						document.title="打印入住确认单"
						this.showOrder(id)
					}else{
						window.close();
					}
        },
        methods:{
					showOrder(id){
		        this.$ajax.GetOrderDetailForPrint({OrderSerialid:id}).then(res=>{
		          if(res.Success){
		            this.orderInfoData=res.Data;
								this.$nextTick(()=>{
									window.print();
									window.close();
								})
		          }
		        })
		      }
        }
	  }
</script>
